<template>
    <div class=" white-module">
      <div class="troops">
        <img src="@/assets/title_bg.png"/>
        <div class="c"><span>参赛代表队</span> {{userInfo ? userInfo.team.teamName : ''}} <span>领队</span> {{userInfo ? userInfo.leader.realName:''}}</div>
      </div>
      <div class="title">
          <div class="left">
            本赛区赛事
          </div>
          <div class="right">
            <span v-if="haveJinJi">
            (您有赛事<span>获得晋级资格</span>，请前往报名记录查)</span><el-button @click="handleEnrollList" type="text">查看报名记录</el-button>
          </div>
      </div>

      <div class="global-table">
        <el-table
          :data="dataList"
          :header-cell-style="{
            background: '#F5F7FA',
            color: '#333',
          }"
          style="width: 100%"
        >
          <el-table-column prop="match_name" label="赛事名称" />
          <el-table-column prop="season" label="赛季" />
          <el-table-column prop="matchdate" label="比赛时间" />
          <el-table-column prop="signdate" label="报名起止时间" />

          <el-table-column label="赛事报名" width="200">
            <template #default="scope">
              <span style="display: none;">{{validateArea(scope.row.id)}}</span>
              <span  class="table-text-btn"  @click="handleEnroll(scope.row.id)"  v-if="scope.row.signflag=='1' && userInfo.team.status==1 && scope.row.excludeAreaFlag===false"> 去报名 </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-row class="global-pagination">
        <el-col :span="8" class="total"> 共搜索 {{total}} 条数据 </el-col>
        <el-col :span="16">
          <el-pagination
            background
            layout="  prev, pager, next, jumper"
            :total="total"
            :page-size="10"
            :current-page="page"
            :small="false"
            :disabled="false"
            @size-change="query"
            @current-change="pageCurrentChangeHandle"
          />
        </el-col>
      </el-row>
    </div>
    <el-dialog
    v-model="dialogVisible" :show-close="false"
    width="400px"
  >
    <div class="confirm-dialog">
         <div class="image"><img src="@/assets/common/hint_red.png"/></div>
         <div class="text">该选手已有报名赛项，是否确认删除？</div>
         <div class="btns">
            <el-button type="primary" @click="dialogVisible = false">确认</el-button>

            <el-button @click="dialogVisible = false">取消</el-button>
         </div>
    </div>

  </el-dialog>
  </template>

<script lang="ts" >
import {ref,toRefs, reactive, defineComponent} from "vue";
import listService from "@/utils/listService";
import router from "@/router";
import {getCache} from "@/utils/cache";
import baseService from "@/utils/baseService";



export default defineComponent({
  setup() {


    const state = reactive({
      getDataListURL: "/front/fast/match/match/page?pageSize=10&name=小鸟飞飞",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        orderId: "",
        status: "",
        name: ""
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },

  data() {
    return {
      haveJinJi:false ,
      isCollapse:1,
      dialogVisible:false,
      isNavCollapse:false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
      userInfo: "" as any,
    };
  },

  mounted() {
    this.userInfo = getCache('userInfo', { isSessionStorage: true }, {})
    this.queryHaveJinJi();
  },

  methods: {
    // 查询获取是否有晋级资格
    queryHaveJinJi() {
      baseService.get("/front/spmatchItemTeam/queryRise?teamId=" + this.userInfo.team.id).then((res: any) => {
        this.haveJinJi = res.data.total > 0;
      });
    },

    // 赛事报名地区控制
    validateArea(matchId: number) {
      if(!matchId){
        return;
      }
      baseService.get("/front/excludeArea/queryGroup?matchId=" + matchId + "&city=" + this.userInfo.team.city).then((res: any) => {
        // 循环dataList
        if(!this.dataList){
          return;
        }
        this.dataList.forEach((item: any) => {
          if (item.id == matchId) {
            item.excludeAreaFlag = res.data.length > 0;
          }else{
            item.excludeAreaFlag = false;
          }
        });
      });
    },

    handleEnroll : (id:string) => {
      router.push("/enroll/matchEnroll?id="+id);
    },
    handleEnrollList(){
      router.push("/enroll/enrollList");
    },
    handleCollapse(){
      if (this.isCollapse == 1) {
        this.isCollapse= 2;
        this.isNavCollapse = false;
      } else {
        this.isCollapse = 1;
        setTimeout(() => {
          this.isNavCollapse = true;
        }, 130);
      }
    }
  }
});
</script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped >
.white-module {
  padding-top: 20px;
}

.troops {
  position: relative;
  margin: 0px 0px 10px 20px;

  img {
    width: 579px;
  }

  .c {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 532px;
    line-height: 54px;
    border-radius: 6px;

    span {
      font-size: 16px;
      font-weight: $font-weight-bold;
      margin-left: 24px;
      margin-right: 11px
    }

    ;

    span:nth-child(3) {
      margin-left: 40px;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
  margin-top: 17px;

  .left {
    font-size: 16px;
    font-weight: $font-weight-bold;
  }

  ;

  .right {
    color: #959CA9;

    .el-button {
      margin-left: 16px;
    }

    span {
      color: #FF8F3C;
    }
  }
}

.global-table {
  margin-top: 15px;
  padding: 0px 20px;
}

.popper-menu {
  border: 0px !important;

  .el-menu {
    padding: 0px !important;
    background-color: #008fd1 !important;

    .el-menu-item-group__title {
      padding: 0px;
    }

    .el-menu-item:hover {
      background-color: #ffffff !important;
      color: #00a0e9;
    }

    .el-menu-item.is-active {
      background-color: #ffffff !important;
    }
  }
}</style>
